import React, { useEffect, useState } from "react";
import "./index.css"
import Top from "./top"
import { withRouter } from "react-router-dom";
import { getPointsApi,getPtypeApi} from "../../api/point";
import { getUserInfo } from "../../api/userinfo"
import { Tabs } from 'react-vant'
const Shop = (props) => {
    const [points_mall, setPoints] = useState([])
    const [ptype, setPttype] = useState([])
    const [user, setUser] = useState("getUserInfo")
    useEffect(() => {
      getUserInfo({phone: '18234824645'}).then((res)=>{
        setUser(res)
      })
      setTimeout(() => {
      },1000 );
    }, [])
    const PointsList = async () => {
        let res = await getPointsApi()
        setPoints(res)
    }
    const PtypeList = async () => {
        let res = await getPtypeApi()
        setPttype(res)
    }
    useEffect(() => {
        PtypeList()
        PointsList()
    }, [])
    const searchpoints = (val, v,a,l,s,b) => {
        props.history.replace({ pathname: "/Detail", state: { name: val, price: v ,img:a,integral:l,uid:user[0].uid,coid:s,type:b} })
    }
    
    return (
        <div className="you">
            <Top title="鱼酷商城"></Top>
            <div className="ji">
                <div className="tai">
                    <p>当前积分：
                        <span>
                            {user[0].integral}
                        </span>
                    </p>
                    <span>积分规则</span>
                </div>
            </div>
            <div className='demo-tabs'>
                <Tabs active='c'>
                    {ptype.map((item) => (
                        <Tabs.TabPane  key={item.ptid}title={item.type}>
                            <div className="bb">
                                <ul>
                                    {
                                        points_mall.filter(it=>item.ptid === it.ptid).map(i => <li key={i.id}>
                                            <img src={i.img} alt='' />
                                            <p>{i.name}</p>
                                            <span>{i.price}积分</span>
                                            <button onClick={() => { searchpoints(i.name, i.price,i.img,user[0].integral,i.coid,i.type) }} key={i.id}>兑换</button>
                                        </li>)
                                    }
                                </ul>
                            </div>
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
        </div>
    );
}
export default withRouter(Shop)